<template>
  <div class="box">
    <button class="my-button" @click="count++">变量++: result {{ count }}</button>
    <p />
    <button class="my-button" @click="increment">方法修改: result {{ count }}</button>
  </div>
</template>

<!-- 组合式api -->
<script>

import {ref} from 'vue'
export default {
  // setup是个钩子,用于组合式api
  // setup方法是先于beforeCreate方法执行的
  setup() {
    console.log('method setup ')
    const count = ref(0)

    // 方法的不同写法
    const increment = () => {
      count.value ++
    }

    function increment2() {
      count.value ++
    }

    return {
      count,
      increment
    }
  },
  beforeCreate() {
    console.log('method beforeCreate')
  }
}

</script>

<style scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
}

.my-button {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 15px 32px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
}
</style>

